<!-- time picker -->
<template>
  <div class="time-picker">
    <el-date-picker v-model="values" :type="type" :range-separator="rangeSeparator" :start-placeholder="startPlaceholder"
                    :end-placeholder="endPlaceholder" :picker-options="needPickerOptions ? pickerOptions : {}"
                    :value-format="valueFormat" :format="format" :prefix-icon="prefixIcon" :default-time="defaultTime"
                    :clearable="clearable" @change="handleChange">
    </el-date-picker>
  </div>
</template>

<script>
import { DateTimeFormat } from '@/utils'
export default {
  name: 'TimePicker',
  data () {
    return {
      values: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
        // shortcuts: [{
        //   text: '最近一周',
        //   onClick (picker) {
        //     const end = new Date()
        //     const start = new Date()
        //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        //     picker.$emit('pick', [start, end])
        //   }
        // }, {
        //   text: '最近一个月',
        //   onClick (picker) {
        //     const end = new Date()
        //     const start = new Date()
        //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        //     picker.$emit('pick', [start, end])
        //   }
        // }, {
        //   text: '最近三个月',
        //   onClick (picker) {
        //     const end = new Date()
        //     const start = new Date()
        //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        //     picker.$emit('pick', [start, end])
        //   }
        // }
        // ]
      }
    }
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      // daterange datetimerange
      default: 'daterange'
    },
    rangeSeparator: {
      type: String,
      default: '-'
    },
    startPlaceholder: {
      type: String,
      default: '开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '结束日期'
    },
    valueFormat: {
      type: String,
      default: ''
    },
    format: {
      type: String,
      default: ''
    },
    // 设置 defaultTime 与 valueFormat 时间格式冲突
    defaultTime: {
      type: Array || String,
      default: () => []
    },
    prefixIcon: {
      type: String,
      default: 'el-icon-time'
    },
    clearable: {
      type: Boolean,
      default: true
    },
    needPickerOptions: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    'value': function (params) {
      this.values = this.value
    }
  },
  mounted () {
    this.values = this.value
  },
  methods: {
    handleChange (value) {
      let dateRange = []
      if (value && value[0] instanceof Date) {
        let strReg = 'yyyy-MM-dd hh:mm:ss'
        if (this.type === 'daterange') {
          strReg = 'yyyy-MM-dd'
        }
        let timeStr = this.valueFormat || strReg
        dateRange = [DateTimeFormat(value[0], timeStr), DateTimeFormat(value[1], timeStr)]
      } else {
        dateRange = value
      }
      this.$emit('input', dateRange)
    }
  }
}
</script>
